<template>
  <div class="agencylist">
    <div class="list">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="partnerid" label="ID" width="50" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="92" align="center">
        </el-table-column>
        <el-table-column prop="tel" label="手机号" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="agency_level"
          label="代理级别"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="agency_area"
          label="代理区域"
          width="196"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="mange_benefit"
          label="管理津贴"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="cash_money"
          label="提现金额"
          width="105"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="sale_incentive"
          label="销售奖励"
          width="105"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="total_money"
          label="总金额"
          width="105"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="money_opera"
          label="操作"
          width="120"
          align="center"
        >
        <el-button type="text" @click="dialogTableVisible = true" 
            >钱包明细</el-button
          >
        </el-table-column>
      </el-table>


      <!-- 钱包明细弹框 -->
      <el-dialog title="钱包明细" :visible.sync="dialogTableVisible">
        <div class="hx"></div>
        <div>
          <table class="all_tb2">
            <tr>
              <th>总金额</th>
              <th>总销售奖励</th>
              <th>总管理津贴</th>
              <th>总提现金额</th>
              <th>
                <div class="name_input2">
                  收支类型：<input type="text" placeholder="全部" />
                </div>
              </th>
              <th>
                <!-- 选择日期范围 -->
                收支日期：
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </th>
            </tr>
            <tr>
              <td>0元</td>
              <td>0元</td>
              <td>0元</td>
              <td>0元</td>
            </tr>
          </table>
        </div>

        <!-- 单选、个人信息 -->
        <div class="partnerlist_xx">
          <span class="srzc">支出\收入:</span>
          <el-radio v-model="radio" label="1">全部</el-radio>
          <el-radio v-model="radio" label="2">支出(10000)元</el-radio>
          <el-radio v-model="radio" label="3">收入(0元)</el-radio>
          <!-- <span class="srzc">个人信息</span> -->
          <el-tooltip
            content="暂无个人信息"
            placement="right"
            effect="light"
            :class="'artnerlist_grxx'"
          >
            <el-button>个人信息</el-button>
          </el-tooltip>

          <!-- 导出数据到Excel、 查询、重置-->
          <router-link to="" tag="button" :class="'withdraw_excel3'"
            >导出数据到Excel</router-link
          >
          <router-link to="" tag="div" :class="'reset3'">
            <i class="el-icon-refresh-right"></i>重置
          </router-link>
          <!--  @click.native="search"       @click.native="reset" -->
          <router-link to="" tag="div" :class="'found3'">
            <i class="el-icon-search"></i>查询
          </router-link>
        </div>

        <!-- 钱包明细表格 -->
        <el-table :data="gridData" border style="width: 100%">
          <el-table-column
            prop="wallet_id"
            label="ID"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="wallet_name"
            label="姓名"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="wallet_tel"
            label="电话"
            align="center"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="wallet_money"
            label="金额"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="income_expend"
            label="收入支出"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="payment_type"
            label="收支类型"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="payment_date"
            label="收支时间"
            width="220"
            align="center"
          >
          </el-table-column>
        </el-table>

        <!-- 分页条 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="1"
        >
        </el-pagination>

        <div class="hx2"></div>
        <!-- <div slot="footer" class="partner-footer"> -->
          <!-- <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible3 = false"
            >确 定</el-button
          > -->
        <!-- </div> -->
      </el-dialog>



    </div>
  </div>
</template>

<script>

// @ is an alias to /src

export default {
  name: "AgencyList",
  components: {},
  data() {
    return {
      tableData: [
        {
          partnerid: 6,
          name: "中药材",
          tel: 13158850832,
          agency_level: "市服务站",
          agency_area: "成都市",
          mange_benefit: 678,
          cash_money: 2346,
          sale_incentive: 678,
          total_money: 34567876,
          // money_opera: "钱包明细",
        },
      ],

      // 选择日期范围
      value1: "",
      // 单选
      radio: "1",

      // 分页
      currentPage4: 1,

      // 弹框数据
      gridData: [
        {
          wallet_id: 7,
          wallet_name: "中通信通",
          wallet_tel: 13688473206,
          wallet_money: 301,
          income_expend: "支出",
          payment_type: "挂号",
          payment_date: "2020-12-02 17:11:20",
        },
        {
          wallet_id: 7,
          wallet_name: "中通信通",
          wallet_tel: 13688473206,
          wallet_money: 301,
          income_expend: "支出",
          payment_type: "挂号",
          payment_date: "2020-12-02 17:11:20",
        },
      ],
      dialogTableVisible: false,
    };
  },

  methods:{
    // 分页
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  }
};
</script>

<style scoped>
@import '../../style/css/AgencyList.css'





</style>